<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>客服管理</el-breadcrumb-item>
      <el-breadcrumb-item>在线客服</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <div id="main" style="width: 800px;height:400px;">
        <div>
          <input type="text" v-model="message" style="border:1px solid #eeeeee;" />

          <el-button type="primary" @click="sendMessage" style="margin-left:1rem;">发送</el-button>
          <el-button type="primary" @click="refreshData" style="margin-left:1rem;">刷新{{number}}</el-button>
          <el-button type="primary" @click="chat" style="margin-left:1rem;">聊天</el-button>
        </div>
        <div class="massage-wrap">
          <div v-for="(item,i) in msgList" :key="i">
            <div v-if="item.type==2" style="display:flex;align-items:center;justify-content:flex-start;margin-bottom:2rem;">
              <div>{{item.message}}</div>
            </div>
            <div v-if="item.type==1" style="display:flex;align-items:center;justify-content:flex-end;margin-bottom:2rem;">
              <div>{{item.message}}</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- <div>
      <div class="sidebar">
        <card :user="user" :search.sync="search"></card>
        <list
          :user-list="userList"
          :session="session"
          :session-index.sync="sessionIndex"
          :search="search"
        ></list>
      </div>
      <div class="main">
        <message :session="session" :user="user" :user-list="userList"></message>
        <text :session="session"></text>
      </div>
    </div>-->
  </div>
</template>

<script>
import mix from "./kefu-mixins.js";
export default {
  mixins: [mix]
};
</script>

<style lang="less" scoped>
  .massage-wrap{
    width: 500px;
    height: 300px;
    overflow-y: scroll;
  }
#chat {
  overflow: hidden;
  border-radius: 3px;

  .sidebar,
  .main {
    height: 100%;
  }
  .sidebar {
    float: left;
    width: 200px;
    color: #f4f4f4;
    background-color: #2e3238;
  }
  .main {
    position: relative;
    overflow: hidden;
    background-color: #eee;
  }
  .m-text {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
  }
  .m-message {
    height: ~"calc(100% - 160px)";
  }
}
</style>
